<template>
  <view class="page">
    <UserDate/>
    
    <view class="tcard">
      <view class="title">
        住院人信息
      </view>
      <view class="tform no-border left">
        <view class="tform-item">
          <view class="label">住院患者：</view>
          <view class="value">{{userInfo.name}}</view>
        </view>
        <view class="tform-item">
          <view class="label align">住院号：</view>
          <view class="value">0001232123</view>
        </view>
        <view class="tform-item">
          <view class="label">入院病区：</view>
          <view class="value">内科中心病区</view>
        </view>
      </view>
    </view>
    
    <view class="tcard concave">
      <view class="top">
        <view class="txt">
          剩余金额
        </view>
        <view class="money">
          123.59
        </view>
      </view>
      <view class="line"></view>
      
      <view class="tform left">
        <view class="tform-item">
          <view class="value flexR">
            <img :src="`${$store.state.baseApi}/icon/amount.png`" alt="">
            预交金额 ：
          </view>
          <input type="text" v-model="money" placeholder="请输入预交金额"/>
        </view>
        <view class="box flexR">
          <view v-for="item in moneyChose" class="money_chose" @click="money = item">
            ￥ {{item}}
          </view>
        </view>
      </view>
    </view>
    
    <view class="btm-btn">
      去支付
    </view>
    <view class="text-btn" @click="toPayRecodes">
      查看住院缴费记录
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex';
  import UserDate from '@/components/UserInfo/user-date.vue'
  const moneyChose = [
    100, 500, 1000, 1500, 2000, 3000
  ]
  export default {
    components: {UserDate},
    data() {
      return {
        moneyChose,
        money: undefined
      }
    },
    computed:{
    	...mapGetters(['userInfo']),
    },
    methods: {
      toPayRecodes() {
        uni.navigateTo({
          url: `./payRecords`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.concave {
  padding: 24upx;
  background: radial-gradient(circle 20upx at left 224upx, transparent 20upx, #FFF 50%), radial-gradient(circle 20upx at right 224upx, transparent 20upx, #FFF 50%);
  background-repeat: no-repeat, no-repeat;
  background-size: calc(100% - 20px), calc(100% - 20px);
  background-position: left, right;
}
.top {
  height: 200upx;
  text-align: center;
  .txt {
    font-weight: bold;
    font-size: 28upx;
    color: rgba(0,0,0,0.8);
    padding-top: 40upx;
  }
  .money {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 48upx;
    color: $theme-color;
  }
}
uni-input {
  // text-align: right;
  .uni-input-placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.24);
  }
}
.value {
  align-items: center;
  >img {
    height: 48upx;
    width: 48upx;
    margin-right: 10upx;
  }
}
.box {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24upx;
  margin-top: 32upx;
  .money_chose {
    flex: 0 0 30%;
    height: 80upx;
    line-height: 80upx;
    text-align: center;
    background: #E2EDFF;
    border-radius: 8upx;
    color: $theme-color;
  }
}
.text-btn {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 28upx;
  color: #3E81F7;
  text-align: center;
  margin-top: 24upx;
}
.align {
  width: 5em;
  text-align: justify;
  text-align-last: justify;
}
</style>
